import React from 'react';

import './index.scss';

const TaskBlock = (props) => {
  return <div className={`task-block ${props.finish ? 'task-block--complete' : ''}`}>
    <div className="task-block__text-group">
      <span className="task-block__sequence">{props.sequence}</span>
      <p className="task-block__desc">{props.taskName}</p>
    </div>
    <div onClick={props.tapTaskBtn.bind(null, props.type)} className="task-block__btn">
      {props.finish ? 'Hecho' : props.buttonText}
    </div>
  </div>
}

TaskBlock.defaultProps = {
  sequence: 0,
  taskName: '',
  buttonText: '',
  finish: false,
  tapTaskBtn: () => {}
}

export default TaskBlock;
